<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-image: url("../image/background.jpg");
            background-size: cover;
        }

        caption {
            text-align: center;
            font-size: 20px;
            color: #1b6d85;
        }

        #app {
            width: 410px;
            height: 810px;
            margin: auto;
            padding-top: 30px;
            font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
        }

        .title {
            font-size: 30px !important;
            margin-left: -50px;
        }

        table {
            width: 410px;
            height: 660px;
        }

        #submitButton {
            cursor: pointer;
            width: 120px;
            height: 40px;
            margin-top: 25px;
            padding: 0;
            background: rgb(3, 116, 97);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #03857a;
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        #submitButton:hover {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        #submitButton:active {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1) inset,
            0 1px 4px 0 rgba(0, 0, 0, .1);

            border: 0px solid #ef4300;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .opt {
            text-align: center;
        }

        .inputer {
            width: 200px;
            height: 25px;
            background: #2d2d2d; /* browsers that don't support rgba */
            /*运行对颜色值设置透明度*/
            background: rgba(45, 45, 45, .15);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #3d3d3d; /* browsers that don't support rgba */
            border: 1px solid rgba(255, 255, 255, .15);
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        .inputer:-moz-placeholder {
            color: #fff;
        }

        .inputer:-ms-input-placeholder {
            color: #fff;
        }

        .inputer::-webkit-input-placeholder {
            color: #fff;
        }

        .inputer:focus {
            outline: none;
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #eee;
        }

        .toLogin {
            color: #ffff;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <form :model="SignUp">
        <table>
            <caption><strong class="title">注册</strong></caption>
            <tr>
                <td>用户类型:</td>
                <td>
                    <div>
                        <input v-model="SignUp.identity"  type="radio" name="identity">学生
                        <input v-model="SignUp.identity" type="radio" name="identity" checked="checked">老师
                    </div>
                </td>
            </tr>
            <tr>
                <td>头&nbsp &nbsp &nbsp 像:</td>
                <td>
                    <div class="inputer">
                        <!--
                            el-upload上传组件
                            action属性：图片上传提交的后台url
                            auto-upload属性：true代表自动上传
                            name属性：Controller中接收请求参数的名字
                            show-file-list属性：false代表不展示文件列表
                            on-success属性：上传成功时回调的钩子函数
                            before-upload属性：上传之前时回调的钩子函数
                        -->
                        <el-upload
                                class="avatar-uploader"
                                action="/SignUp/submit"
                                :auto-upload="autoUpload"
                                name="imgFile"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    用 户 名：
                </td>
                <td>
                    <input v-model="SignUp.username" type="text" name="username" class="inputer" placeholder="请输入您的用户名！">
                </td>
            </tr>
            <tr>
                <td>
                    密 &nbsp &nbsp &nbsp 码：
                </td>
                <td>
                    <input v-model="SignUp.password" type="password" name="password" class="inputer" placeholder="请输入您的用户密码！">
                </td>
            </tr>
            <tr>
                <td>真实姓名:</td>
                <td>
                    <input v-model="SignUp.truename" type="text" name="truename" class="inputer" placeholder="请输入您的真实姓名！">
                </td>
            </tr>
            <tr>
                <td>性 &nbsp &nbsp &nbsp 别：</td>
                <td>
                    <div>
                        <input v-model="SignUp.sex" type="radio" name="sex">男
                        <input v-model="SignUp.sex" type="radio" name="sex" checked="checked">女
                    </div>
                </td>
            </tr>
            <tr>
                <td>年 &nbsp &nbsp &nbsp 龄：</td>
                <td>
                    <input v-model="SignUp.age" type="text" name="age" class="inputer" placeholder="请输入您的年龄！">
                </td>
            </tr>
            <tr>
                <td>电话号码：</td>
                <td>
                    <input v-model="SignUp.phone" type="text" name="phone" class="inputer" placeholder="请输入您的手机号！">
                    <input type="button" style="font-size: x-small" id="validateCodeButton" @click="sendValidateCode()" value="发送验证码">
                </td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td>
                    <input v-model="SignUp.validateCode" type="text" name="validateCode" class="inputer"  placeholder="请输入验证码">
                </td>
            </tr>
            <tr>
                <td>电子邮箱：</td>
                <td>
                    <input v-model="SignUp.email" type="text" name="email"  class="inputer" placeholder="请输入您的e-mail！">
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input v-model="SignUp.personId" type="text" name="personId" class="inputer" maxlength="18" placeholder="请输入您的身份证号！">
                </td>
            </tr>
            <tr>
                <td>年 &nbsp &nbsp &nbsp 级：</td>
                <td>
                    <input v-model="SignUp.grade" type="text" name="grade" class="inputer" placeholder="请输入您的年级！">
                </td>
            </tr>
        </table>
        <div class="opt">
            <td colspan="2">
                <input type="button" id="submitButton" value="注册" @click="submitSign()">
                <a href="../login.html" class="toLogin">已有账号，直接登录</a>
            </td>
        </div>
    </form>
</div>

<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/classroom.js"></script>
<script src="/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let id = getUrlParam("id");
</script>

<script>
    new Vue({
        el: '#app',
        data:{
            SignUp:{
                // identity:'',
                // file:'',
                // username:'',
                // sex:'',
                // age:'',
                // phone:'',
                // validateCode:'',
                // email:'',
                // personId:'',
                // grade:''
            },
            autoUpload:true,//自动上传
            imageUrl:null,//模型数据，用于上传图片完成后图片预览
            // fileList: []
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                //response的数据  flag: true, message: "图片上传成功", data: "5efca038-a934-46ae-99f5-2c57a906f4d9.jpg"
                console.log(response , file)
                this.$message({
                    type:response.flag?'success':'error' ,
                    message:response.message
                });
                //页面回显上传成功的图片
                this.imageUrl = "http://bucket-test-1212.oss-cn-zhangjiakou.aliyuncs.com/"+response.data
                //提交表单，表单中也需要包含图片信息
                this.form.img = response.data
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //发送验证码
            sendValidateCode() {
                //1.验证手机号码的格式
                let telephone = this.SignUp.phone
                console.log('telephone = ' + telephone)
                if (!checkTelephone(telephone)) {
                    this.$message.error('当前手机号码格式有误，请重新填写')
                    return;
                }

                //2.实现30s倒计时效果
                validateCodeButton = $("#validateCodeButton")[0]
                //每隔一秒，调用执行doLoop()
                clock = window.setInterval(doLoop, 1000)

                //3.发起axios请求，进行短信发送
                axios.post('/validateCode/sendByOrder?telephone=' + telephone).then(response => {
                    if (response.data.flag) {
                        this.$message.success(response.data.message)
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            },
            //提交注册
            submitSign() {
                //验证手机号的格式
                let telephone = this.SignUp.phone
                if (!checkTelephone(telephone)) {
                    this.$message.error('当前手机号码格式有误，请重新填写')
                    return;
                }
                //验证身份证号的格式
                let idCard = this.SignUp.personId
                if (!checkIdCard(idCard)) {
                    this.$message.error('当前身份证号码格式有误，请重新填写')
                    return;
                }

                let data = new FormData();
                for(let key in this.SignUp){
                    data.append(key,this.SignUp[key])
                }
                axios.post('/SignUp/submit', this.SignUp).then(response => {
                    let code = response.data.code
                    let msg = response.data.msg
                    if (code == 200) {
                        this.$message({showClose: true,message: msg,type: 'success'});
                        //跳转index.html登录界面
                        window.location.href = "/index.html?orderId=" + response.data.data
                    } else {
                        this.$message({showClose: true,message: msg,type: 'error'});
                    }
                })
            }
        }
    })
</script>
</body>

</html>